<template>
  <div class="home">
    <!--  搜索栏  -->
    <Searchbber></Searchbber>

    <!--  轮播图  -->
    <van-swipe :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <img :src="item.pic" style="width: 100%;height: 160px">
      </van-swipe-item>
    </van-swipe>

    <!--  首页-发现-圆形图标入口列表  -->
    <van-tabs style="margin: 10px 0" type="card" color="#f8f9fd" background="#f8f9fd" line-width="0px"
              line-height="50px">
      <van-tab v-for="(item,index) in ballList" :key="index" v-if="ballList">
        <template #title>
          <div style="text-align: center" @click="getHomePageDragon(item)">
            <van-icon :name="item.iconUrl" color="#fe3a4d" size="32px"
                      style="filter: invert(48%) sepia(54%) saturate(6936%) hue-rotate(333deg) brightness(100%) contrast(105%);"/>
            <div style="color: black">
              {{ item.name }}
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>

    <!--  推荐歌单  -->
    <div style="background-color: #f8f9fd">
      <van-cell style="background-color: #f8f9fd">
        <template #title>
          <span style="font-size: 16px;font-weight: 800">推荐歌单</span>
          <van-icon name="arrow"></van-icon>
        </template>
        <template #right-icon>
          <van-icon name="sangediandian" class-prefix="iconfont"/>
        </template>
      </van-cell>
      <van-swipe :loop="false" :width="140" :show-indicators="false"
                 style="background-color: #f8f9fd;margin-left: 20px" v-if="personaList.creatives">

        <van-swipe-item v-for="(item,index) in personaList.creatives" :key="index"
                        @click="gotoMusicPlayBack(item.id)">
          <div>
            <img :src="item.uiElement.image.imageUrl" style="width: 120px;height: 120px;border-radius: 15px">
          </div>
          <div style="font-size: 12px;font-weight: 500">{{ item.uiElement.mainTitle.title }}</div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--  为你定制精选歌曲  -->
    <van-cell style="background-color: #f8f9fd;">
      <template #title>
        <van-icon name="replay" @click="getSlideSongList"></van-icon>
        <span style="font-size: 16px;font-weight: 800">{{ slideSongText }}</span>
        <button icon="play" type="info" style="background-color: #eaedf2;border-radius: 10px;border: none">
          <van-icon name="play"></van-icon>
          播放
        </button>
      </template>
      <template #right-icon>
        <van-icon name="sangediandian" class-prefix="iconfont"/>
      </template>
    </van-cell>
    <div style="background-color: #f8f9fd;padding: 0 15px;">
      <van-swipe :loop="false" :show-indicators="false"
                 style="background-color: #ffffff;" v-if="slideSongList.creatives">
        <van-swipe-item v-for="(item,index) in slideSongList.creatives" :key="index">
          <div style="text-align: center;background-color: #ffffff;">
            <van-row v-for="(items,indexx) in item.resources" :key="indexx" style="height: 90px"
                     @click="gotoMusicPlayBack(items.resourceExtInfo.songPrivilege.id)">
              <van-col span="6">
                <div style="border-radius: 15px;width: 90px;height: 80px;margin: 5px">
                  <img :src="items.uiElement.image.imageUrl" style="width: 80px;height: 80px;border-radius: 10px">
                </div>
              </van-col>
              <van-col span="14" style="text-align: left;margin-left: 12px;">
                <div style="font-size: 14px;font-weight: 700;padding-top: 10px">
                  {{ items.uiElement.mainTitle.title }}
                </div>
                <!--       作者         -->
                <!--                <div style="display: flex">-->
                <!--                  <div v-for="(itemss,indexxx) in items.resourceExtInfo.artists" :key="indexxx">-->
                <!--                    <span style="font-size: 12px;margin-right: 5px">{{ itemss.name }}</span>-->
                <!--                  </div>-->
                <!--                </div>-->
              </van-col>
              <van-col span="3" style="line-height: 70px;">
                <van-icon name="play-circle-o" size="22px"/>
              </van-col>
            </van-row>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--  排行榜  -->
    <van-cell style="background-color: #f8f9fd;">
      <template #title>
        <span style="font-size: 16px;font-weight: 800">{{ subTitle }}</span>
        <van-icon name="arrow"></van-icon>
      </template>
      <template #right-icon>
        <van-icon name="sangediandian" class-prefix="iconfont"/>
      </template>
    </van-cell>
    <div style="background-color: #f8f9fd;padding: 0 15px;">
      <van-swipe :loop="false" :show-indicators="false" v-if="slideTopList.creatives"
                 style="background-color: #ffffff;">
        <van-swipe-item v-for="(item,index) in slideTopList.creatives" :key="index">
          <van-cell :value="item.uiElement.mainTitle.titleDesc">
            <template #title>
                <span class="custom-title" style="font-weight: 600;font-size: 16px">{{
                    item.uiElement.mainTitle.title
                  }}</span>
              <van-icon name="arrow"/>
            </template>
          </van-cell>
          <div style="text-align: center;background-color: #ffffff;">
            <van-row v-for="(items,indexx) in item.resources"
                     @click="gotoMusicPlayBack(items.resourceExtInfo.songPrivilege.id)" :key="indexx"
                     style="height: 70px">
              <van-col span="6">
                <div style="border-radius: 15px;width: 90px;height: 60px;margin: 5px">
                  <img :src="items.uiElement.image.imageUrl" style="width: 80px;height: 60px;border-radius: 10px">
                </div>
              </van-col>
              <van-col span="3" style="text-align: center;line-height: 70px;font-weight: 800;">
                <div :style="strColor[indexx]">{{ indexx + 1 }}</div>
              </van-col>
              <van-col span="12" style="text-align: left;font-size: 12px;overflow: hidden;line-clamp: 1">
                {{ items.uiElement.mainTitle.title }}
              </van-col>
              <van-col span="3" style="line-height: 35px;font-size: 12px;font-weight: 600"
                       :style="items.uiElement.labelText.textColor=='colorSecondary7'?{color:'green'}:{color: 'red'}">
                {{ items.uiElement.labelText.text }}
              </van-col>
            </van-row>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--  新歌新碟  -->
    <van-cell style="background-color: #f8f9fd;">
      <template #title>
        <span style="font-size: 16px;font-weight: 800">新歌新碟\数字专辑</span>
        <van-icon name="arrow"></van-icon>
      </template>
      <template #right-icon>
        <van-icon name="sangediandian" class-prefix="iconfont"/>
      </template>
    </van-cell>
    <div style="background-color: #f8f9fd;padding: 0 15px;">
      <van-swipe :loop="false" :show-indicators="false"
                 style="background-color: #ffffff;">
        <van-swipe-item v-for="(item,index) in newSongNewAlbum.creatives" :key="index">
          <div style="text-align: center;background-color: #ffffff;">
            <van-row v-for="(items,indexx) in item.resources"
                     @click="gotoMusicPlayBack(items.resourceExtInfo.songPrivilege.id)" :key="indexx"
                     style="height: 90px">
              <van-col span="6">
                <div style="border-radius: 15px;width: 90px;height: 80px;margin: 5px">
                  <img :src="items.uiElement.image.imageUrl" style="width: 80px;height: 80px;border-radius: 10px">
                </div>
              </van-col>
              <van-col span="14" style="text-align: left;margin-left: 12px;">
                <div style="font-size: 14px;font-weight: 700;padding-top: 10px;line-height: 35px">
                  {{ items.uiElement.mainTitle.title }}
                </div>
                <!--       作者         -->
                <div style="display: flex">
                  <div v-for="(itemss,indexxx) in items.resourceExtInfo.artists" :key="indexxx">
                    <span style="font-size: 12px;margin-right: 5px">{{ itemss.name }}</span>
                  </div>
                </div>
              </van-col>
              <van-col span="3" style="line-height: 70px;">
                <van-icon name="play-circle-o" size="22px"/>
              </van-col>
            </van-row>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>


    <playMusic style="width: 100%;height: 55px;background-color: white;position: fixed;bottom: 49px"></playMusic>

  </div>
</template>

<script>
import {getBanner} from '../api/api'
import Searchbber from "../components/Searchbber.vue";
import {getHomePageBlock, getHomePageDragon, getPersonalized} from "../api/home";
import playMusic from "../components/PlayMusic.vue";

export default {
  name: "home",
  data() {
    return {
      bannerList: {},//轮播图
      ballList: {},//圆形图标入口列表
      personaList: {},//推荐歌单
      personaLimit: 6,//推荐歌单数量
      slideTopList: {},//排行榜数据
      subTitle: '',//排行榜标题
      strColor: [{color: "#c99533"}, {color: "#7d86aa"}, {color: "#bc7548"}],//排行榜颜色数组
      slideSongList: {},//为你定制精选歌曲
      slideSongText: '',
      newSongNewAlbum: {},//新歌新碟
    }
  },
  components: {
    Searchbber,
    playMusic
  },

  created() {
    // 获取首页-发现数据
    this.getHomePageBlock()
    // 圆形图标
    getHomePageDragon().then(res => {
      if (res.status === 200) {
        this.ballList = res.data.data
      }
    })
    //   推荐歌单
  },
  methods: {
    // 获取首页所有数据
    getHomePageBlock() {
      getHomePageBlock().then(res => {
        if (res.status === 200) {
          this.bannerList = res.data.data.blocks[0].extInfo.banners//banner广告条
          this.personaList = res.data.data.blocks[1]//推荐歌单
          this.slideSongList = res.data.data.blocks[2]//为你定制精选歌曲
          this.slideTopList = res.data.data.blocks[3]//排行榜
          this.slideSongText = this.slideSongList.uiElement.subTitle.title
          this.subTitle = this.slideTopList.uiElement.subTitle.title
          this.newSongNewAlbum = res.data.data.blocks[4]//新歌新碟
        }
      })
    },
    // 定制精选歌曲
    getSlideSongList() {
      this.slideSongList = []
      this.getHomePageBlock()
    },
    //  通过图标判断前往哪里
    getHomePageDragon(item) {
      if (item.name === '每日推荐') {
        this.$router.push('recommendSongs')
      } else if (item.name === '歌单') {
        this.$router.push('catList')
      }
    },
    // 跳转到歌曲详情
    gotoMusicPlayBack(item) {
      this.$router.push({name: 'musicPlayBack', query: {id: item}})
    }
  }
}
</script>

<style scoped lang="scss">


.home {
  margin-bottom: 55px;
  //height: 100%;

  .ballList {

  }
}


</style>
